<template>
  <div class="test">
    <!-- <h1 class="test-h1">hellow</h1> -->
    <div>
      <!-- <h1>树形结构</h1> -->
      <!--
      data: 传入需要渲染的数据
      label: 值就是渲染到浏览器中的数据
      children：所有的字节点需要通过children进行渲染

      props: 用于修改一些默认值
        label: 可以通过这个属性把默认的渲染的属性名改为其他名字

      default-expand-all: 是否默认展开所有节点, true表示展开
      -->
      <el-tree
        :data="treedata"
        :props="{label:'name'}"
        default-expand-all=""
      >
        <!-- v-slot="{data}"指令里面的data是tree组件通过作用域插槽
        传递给我们使用的，data名字是tree组件规定的，不能随便写的。
        那我们如何知道tree组件传了data给我们呢？
        答：看tree组件的文档 -->
        <template v-slot="{data}">
          <el-row type="flex" justify="space-between" style="width:100%">
            <el-col>
              <span :span="12">{{ data.name }}</span>
            </el-col>
            <el-col :span="4">
              <el-row type="flex" justify="end">
                <el-col>
                  <span>{{ data.manager }}</span>
                </el-col>
                <el-col>
                  <el-dropdown>
                    <span>操作 <i class="el-icon-bottom" /> </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>黄金糕</el-dropdown-item>
                      <el-dropdown-item>狮子头</el-dropdown-item>
                      <el-dropdown-item>螺蛳粉</el-dropdown-item>
                      <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                      <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-tree>

      <el-upload
        action="#"
        list-type="picture-card"
        :http-request="uploadFn"
      >
        <i class="el-icon-plus" />
      </el-upload>

    </div>
    <!-- default-expand-all默认显示 -->

  </div>
</template>

<script>

// var COS = require('cos-js-sdk-v5')
import COS from 'cos-js-sdk-v5'
// SECRETID 和 SECRETKEY请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
var cos = new COS({
  SecretId: 'AKIDa0AAAtLfpkOlrgEUUDk8XgX7ZkeHdiW3',
  SecretKey: 'HH0RbU6RVHm0xd29zYqqZ1B4g14rNbYE'
})

export default {
  data() {
    return {
      treedata: [{
        name: '总裁办',
        manager: '管理员'

      }, {
        name: '技术部',
        manager: '小明',
        children: [{
          name: '前端研发部',
          manager: '小芳'
        }, {
          name: 'java研发部',
          manager: '小田'
        }]
      }],
      data: 5,
      dialogVisible: false
    }
  },
  created() {
    this.log()
  },
  methods: {
    log() {
      console.log(this.data)
      this.data--
      if (this.data > 0) {
        this.log()
      }
    },
    uploadFn(data) {
      // data里面的file对象才是真正上传给后端的图片对象
      console.log(data)
      cos.putObject({
        Bucket: 'hr-renzi-1313158760', /* 必须 储存桶的名字*/
        Region: 'ap-guangzhou', /* 存储桶所在地域，必须字段 */
        Key: (Date.now()).toString(), /* 必须 字符串，上传到腾讯云的文件名字*/
        StorageClass: 'STANDARD',
        Body: data.file, // 上传文件对象
        onProgress: function(progressData) {
          console.log(JSON.stringify(progressData))
        }
      }, function(err, data) {
        console.log(err || data)
      })
    }

  }
}
</script>

<style lang='scss' scoped>
// 通过$声明全部
// @mixin box {
//   width: 100px;
//   height: 100px;
//   border-right: 15px solid #000;
// }
// $highLight-color: blue;
// .test {
//   @include box; //@include通过这个使用代码块
//   .test-h1 {
//     font-size: 20px;
//     color: red;
//     // &表示的是H1
//     &:hover {
//       $backgroundcolor: green;
//       color: $highLight-color;
//       background-color: $backgroundcolor;
//     }
//   }
// }
</style>
